<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        class="w-100"
        v-model="queryForm.keyword"
        placeholder="关键字搜索"
      />
      <el-button type="primary" :icon="Search" @click="handleSearch"
        >搜索</el-button
      >
      <!-- <el-button class="green-button" :icon="Plus" @click="addProduct"
        >增加</el-button
      >
      <el-button class="green-button" :icon="Plus" @click="refreshTableInfo"
        >刷新</el-button
      > -->
      <!-- 批量删除按钮 -->
      <!-- <el-button
        type="danger"
        :icon="Delete"
        @click="batchDelete"
        :disabled="selectedRows.length === 0"
      >
        批量删除 ({{ selectedRows.length }})
      </el-button> -->
      <!-- 批量上传按钮 -->
      <!-- <el-button type="success" :icon="Upload" @click="showUploadDialog = true">
        批量上传
      </el-button> -->
    </div>
    <div class="table-con">
      <!-- 批量操作提示 -->
      <div v-if="selectedRows.length > 0" class="batch-tip">
        已选择 {{ selectedRows.length }} 个商品待删除
        <el-button type="primary" link @click="clearSelection"
          >清除选择</el-button
        >
      </div>

      <el-table
        ref="tableRef"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        row-key="id"
        @row-contextmenu="handleRowContextmenu"
        @selection-change="handleSelectionChange"
        border
      >
        <!-- 多选列 -->
        <el-table-column type="selection" width="55" />
        <el-table-column prop="pName" label="商品名称" />
        <el-table-column prop="categoryName" label="商品分类" />
        <!-- 商品图片可能有多张 -->
        <el-table-column prop="pImgUrl" label="商品图片" width="120">
          <template #default="scope">
            <div class="image-container">
              <template v-if="scope.row.pImgUrl">
                <el-image
                  v-for="(url, index) in scope.row.pImgUrl
                    .split(',')
                    .slice(0, 1)"
                  :key="index"
                  :src="`${VITE_BASE_URL}${url.trim()}`"
                  style="width: 50px; height: 50px; margin-right: 5px"
                  fit="cover"
                  :preview-src-list="
                    scope.row.pImgUrl
                      .split(',')
                      .map((url: string )=> `${VITE_BASE_URL}${url.trim()}`)
                  "
                  preview-teleported
                ></el-image>
                <span
                  v-if="scope.row.pImgUrl.split(',').length > 3"
                  class="more-images"
                >
                  +{{ scope.row.pImgUrl.split(",").length - 3 }}
                </span>
              </template>
              <span v-else class="no-image">无图片</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="pBrand" label="商品品牌" />
        <el-table-column prop="pType" label="商品型号" />
        <el-table-column prop="pSpecifications" label="商品规格" />
        <el-table-column prop="pPrice" label="商品价格" />
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-input
              link
              size="small"
              type="number"
              v-model="scope.row.buyNumber"
              @change="changeBuyNumber"
              placeholder="请输入要购买的商品数量"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      v-model:page="pagination.page"
      v-model:size="pagination.pageSize"
      :total="total"
      @pagination="getTableData"
    />
    <div>
      <context-menu v-model:show="show" :options="optionsComponent">
        <context-menu-item label="操作1" @click="onMenuClick(1)" />
        <context-menu-group label="操作2">
          <context-menu-item label="Item1" @click="onMenuClick(2)" />
          <context-menu-item label="Item2" @click="onMenuClick(3)" />
          <context-menu-group label="Child with v-for 8">
            <context-menu-item
              v-for="index of 6"
              :key="index"
              :label="'Item3-' + index"
              @click="onLoopMenuClick(index)"
            />
          </context-menu-group>
        </context-menu-group>
        <context-menu-item label="刷新" @click="onMenuClick(1)">
          <template #icon>
            <Refresh style="width: 1em; height: 1em; margin-right: 8px" />
          </template>
        </context-menu-item>
        <context-menu-item label="删除" @click="onMenuClick(1)">
          <template #icon>
            <Delete style="width: 1em; height: 1em; margin-right: 8px" />
          </template>
        </context-menu-item>
      </context-menu>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { Search, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useTable } from "@/hooks/useTable";
import tableApi from "@/api/table";
import "@imengyu/vue3-context-menu/lib/vue3-context-menu.css";
//导入组件右键菜单组件
import {
  ContextMenu,
  ContextMenuGroup,
  ContextMenuItem,
} from "@imengyu/vue3-context-menu";
import type { MenuOptions } from "@imengyu/vue3-context-menu";
//h5-url
const VITE_BASE_URL = import.meta.env.VITE_BASE_URL;
const emit = defineEmits(["update:visible", "tabledataChoose"]);
const queryForm = reactive({
  keyword: "",
});

// 批量操作相关
const selectedRows = ref<any[]>([]);
const tableRef = ref();

const {
  tableData,
  pagination,
  total,
  loading,
  getTableData,
  handleSearch, //搜索
} = useTable(tableApi.productTableList, queryForm);
console.log("🚀 ~ tableData:", tableData.value);

let show = ref(false);
const optionsComponent: MenuOptions = reactive({
  zIndex: 3,
  minWidth: 230,
  x: 500,
  y: 200,
});

// 处理多选变化
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection;
  emit("tabledataChoose", selectedRows.value);
};
const changeBuyNumber = (row: any) => {
  emit("tabledataChoose", selectedRows.value);
};
// 清除选择
const clearSelection = () => {
  selectedRows.value = [];
  // 清除表格选择状态
  if (tableRef.value) {
    tableRef.value.clearSelection();
  }
};
const handleRowContextmenu = (row: any, column: any, event: any) => {
  console.log(row);
  console.log(column);
  console.log(event);
  event.preventDefault();
  show.value = true;
  optionsComponent.x = event.clientX;
  optionsComponent.y = event.clientY;
};
const onMenuClick = (num: number) => {};

const onLoopMenuClick = (index: number) => {};
</script>
<style scoped>
.w-100 {
  width: 200px;
  margin-right: 5px;
}

.filter-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.upload-container {
  padding: 20px;
}

.template-download {
  margin-top: 15px;
  text-align: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.upload-demo {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.upload-demo:hover {
  border-color: #409eff;
}

.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 7px;
}

.green-button {
  background-color: #67c23a;
  border-color: #67c23a;
  color: white;
}

.green-button:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}

.batch-tip {
  background-color: #e1f3d8;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #67c23a;
  font-size: 14px;
}

.image-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.more-images {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}

.no-image {
  font-size: 12px;
  color: #999;
}

.batch-image-upload {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.batch-image-upload-demo {
  margin-bottom: 15px;
}

.uploaded-urls {
  margin-top: 15px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.uploaded-urls h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
}

.url-tip {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.batch-image-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}
</style>
